<template>
  <view class="page-content recharge">
    <cu-custom bg-color="bg-gradual-blue-dark" :isBack="true">
      <block slot="backText"></block>
      <block slot="content">充值</block>
      <block slot="right">
        <view class="action">
          <view class="cu-load load-cuIcon" :class="!true ? 'loading' : 'over'"></view>
        </view>
      </block>
    </cu-custom>
    <view class="form">
      <form>
        <view class="cu-form-group">
          <view class="title">充值金额</view>
          <input placeholder="100~1000不等" name="input" placeholder-style="color:#ffffff" />
        </view>
        <view class="cu-form-group">
          <view class="title">付款方式</view>
          <picker @change="index = $event.detail.value" :value="index" :range="picker">
            <view class="picker">{{index>-1?picker[index]:'请选择付款方式'}}</view>
          </picker>
        </view>
        <view class="cu-form-group">
          <view class="title">账号</view>
          <input name="input" value="24234234234234" placeholder-style="color:#ffffff" />
          <text class="text-blue">复制</text>
        </view>
        <view class="cu-form-group">
          <view class="title">银行</view>
          <input name="input" value="中国农业银行" placeholder-style="color:#ffffff" />
          <text class="text-blue">复制</text>
        </view>
        <view class="cu-form-group">
          <view class="title">银行</view>
          <input name="input" value="单日500-50000每笔" placeholder-style="color:#ffffff" />
        </view>
        <view class="cu-form-group">
          <view class="title">姓名</view>
          <input name="input" value="扎尕那是你" />
          <text class="text-blue">复制</text>
        </view>
        <view class="cu-form-group">
          <view class="title">存款姓名</view>
          <input name="input" placeholder="请输入存款姓名" placeholder-style="color:#ffffff" />
        </view>
        <view class="cu-form-group">
          <view class="title">备注</view>
          <input name="input" placeholder="请输入备注" placeholder-style="color:#ffffff" />
        </view>
        <view class="cu-form-group certificate">
          <view class="title txt-tp">转账凭证</view>
          <view class="pic">
            <image />
          </view>
        </view>

        <view class="text-right">
          <button class="cu-btn round bg-blue shadow baseColor2Bg">已完成转账</button>
        </view>
      </form>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      index: 0,
      picker: ["银行卡", "支付宝", "微信"]
    };
  },
  components: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #406fa0;
  //   padding-bottom: 100rpx;
}
.cu-btn {
  margin-top: 20rpx;
}
.recharge {
  .form {
    background: #406fa0;
    // margin: 30rpx;
    padding: 30rpx 40rpx;
  }

  .text-color {
    color: #fff;
  }
  .cu-form-group {
    background: #033e7a;
    color: #fff;
    // margin: 0;
    // border-bottom: 0.5px solid #31659a;
    input {
      color: #fff;
    }
    .title {
      min-width: calc(4em + 15px);
    }
    &.certificate {
      padding-top: 30rpx;
      padding-bottom: 30rpx;

      .title {
        height: 300rpx;
      }

      .pic {
        flex: 1;
      }

      .pic image {
        height: 300rpx;
        width: 100%;
        background-color: #d9d9d9;
      }
    }
  }
  .text-blue {
    color: #fff;
  }
}
</style>
